<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" v-if="searchItem">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="电话" prop="mobile">
        <el-input v-model="queryParams.mobile" placeholder="请输入电话" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="职能" prop="role">
        <el-input v-model="queryParams.role" placeholder="请输入职能" clearable @clear="getDataList"/>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择状态" clearable @clear="getDataList">
          <el-option label="工作中" value="1"></el-option>
          <el-option label="休息中" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5" v-if="addBtn">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addOrUpdateHandle('add')" v-hasPermi="['deliver:deliverMember:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5" v-if="editBtn">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="addOrUpdateHandle" v-hasPermi="['deliver:deliverMember:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5" v-if="delectBtn">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteHandle" v-hasPermi="['deliver:deliverMember:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5" v-if="exportBtn">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportHandle" v-hasPermi="['deliver:deliverMember:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :border="listBorder" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" v-if="type == 'indexList'"/>
      <el-table-column label="ID" width="55" align="center" prop="id" />
      <el-table-column label="姓名" align="center" prop="name" />
      <el-table-column label="电话" width="150" align="center" prop="mobile" />
      <!-- <el-table-column label="头像" align="center" prop="avatar" />
      <el-table-column label="登录密码" align="center" prop="password" />
      <el-table-column label="密码盐" align="center" prop="salt" /> -->
      <el-table-column label="性别" width="100" align="center" prop="gender">
        <template slot-scope="scope">
          <span>{{ scope.row.gender == 1  ? '男' : '女'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="职能" width="150" align="center" prop="role" />
      <!-- <el-table-column label="装备" align="center" prop="role" /> -->
      <el-table-column label="区域" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.regionVos.length ? scope.row.regionVos.map((item)=>{
              return item.details
          }).join(',') : ''}}
        </template>
      </el-table-column>
      <!-- <el-table-column label="订单数量" width="150" align="center" prop="area" /> -->
      <!-- <el-table-column label="打卡记录" width="150" align="center" prop="area" /> -->
      <el-table-column label="状态" width="150" align="center" prop="status">
        <template slot-scope="scope">
          <span>{{ scope.row.status == 0  ? '休息中' : '工作中'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150" align="center" prop="createtime" />
      <el-table-column label="更新时间" width="150" align="center" prop="updatetime" />
      <el-table-column fixed="right" label="操作" width="150" align="center" class-name="small-padding fixed-width" v-if="type == 'indexList'">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" v-hasPermi="['deliver:deliverMember:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" v-hasPermi="['deliver:deliverMember:remove']">删除</el-button>
        </template>
      </el-table-column>
       <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150" v-if="chooseTable">
        <template slot-scope="scope">
          <el-button size="small" @click="toggleSelectHandle(scope.row)" :style="actionStyle(scope.row)">
            {{actionText(scope.row)}}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './index-add-or-update'  //新增修改的状态弹窗
export default {
  name: "riderList",
  mixins: [mixinViewModule],
  props: {
    //  type                              使用列表的状态 indexList为后面有操作权限
    //  searchItem                        是否显示查询板块
    //  listBorder                        table是否展示边框
    //  chooseTable                       table是否可以选中
    //  addBtn                            是否显示新增按钮
    //  editBtn                           是否显示修改按钮
    //  delectBtn                         是否显示删除按钮
    //  exportBtn                         是否显示导出按钮
    type: {
      type: String,
      default: ''
    },
    searchItem: {
      type: Boolean,
      default: false
    },
    listBorder: {
      type: Boolean,
      default: false
    },
    chooseTable: {
      type: Boolean,
      default: false
    },
    editBtn: {
      type: Boolean,
      default: false
    },
    addBtn: {
      type: Boolean,
      default: false
    },
    delectBtn: {
      type: Boolean,
      default: false
    },
    exportBtn: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/deliverMember/list',
        getDataListIsPage: true,
        deleteURL: '/deliverMember/remove',
        deleteIsBatch: true
      },
      // 查询参数
      queryParams: {
        name: '',
        mobile: '',
        role: '',
        status: '',
      },
      value: '', //如果table可以选中，选中的值
    };
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
  },
  methods: {
    actionStyle(row) {
      let color = "#666";
      if (this.value) {

        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              color = "#409EFF";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            color = "#409EFF";
          }
        }
      }
      return {
        color
      }
    },
    actionText(row) {
      let text = "未选择";

      if (this.value) {
        if (this.value instanceof Array) {
          this.value.forEach(item => {
            if (item.id == row.id) {
              text = "已选择";
            }
          });
        }
        else {
          if (this.value.id == row.id) {
            text = "已选择";
          }
        }
      }
      return text
    },
    toggleSelectHandle(row) {
      if (this.value instanceof Array) {
        const index = this.value.findIndex((r) => r.id === row.id);
        if (index > -1) {
          this.value.splice(index, 1);
        } else {
          this.value.push({ ...row });
        }
      } else {
        if (row.id === this.value?.id) {
          this.value = {};
        } else {
          this.value = { ...row };
        }
      }
    },
  }
};
</script>
<style lang="scss" scoped>
</style>
